<template>
  <div class="user">
    <pagesearch :searchFormConfig="searchFormConfig" />
    <div class="eltable">
      <ZZYform
        :propList="propList"
        :listData="userList"
        :title="title"
        :isShowcolom="isShowcolumn"
        :isSelection="isSelection"
      >
        <template #enable="scope">
          <el-button size="mini"
            >{{ scope.row.enable ? '启用' : '禁用' }}
          </el-button>
        </template>
        <template #createAt="scope">
          <strong>{{ $filters.formatTime(scope.row.createAt) }}</strong>
        </template>
        <template #updateAt="scope">
          <strong>{{ $filters.formatTime(scope.row.updateAt) }}</strong>
        </template>
        <template #handler>
          <div class="">
            <el-button type="text" size="mini"> 编辑 </el-button>
            <el-button type="text" size="mini"> 删除 </el-button>
          </div>
        </template>
      </ZZYform>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

import { useStore } from '@/store'

import { searchFormConfig } from './config/search.config'

import pagesearch from '@/components/page-search/index'
import ZZYform from '@/base-ui/table/index'

export default defineComponent({
  name: 'user',
  components: { pagesearch, ZZYform },
  setup() {
    const stote = useStore()
    stote.dispatch('systemModule/getpagelist', {
      pageUrl: '/users/list',
      queryInfo: {
        offset: 0,
        size: 10
      }
    })
    const userList = computed(() => stote.state.systemModule.userList)
    // const userCount = computed(() => stote.state.systemModule.userCount)

    const propList = [
      { prop: 'name', label: '用户名', minWidth: '100' },
      { prop: 'realname', label: '真实姓名', minWidth: '100' },
      { prop: 'cellphone', label: '手机号码', minWidth: '100' },
      { prop: 'enable', label: '状态', minWidth: '100', slotname: 'enable' },
      {
        prop: 'createAt',
        label: '创建时间',
        minWidth: '250',
        slotname: 'createAt'
      },
      {
        prop: 'updateAt',
        label: '更新时间',
        minWidth: '250',
        slotname: 'updateAt'
      },
      { label: '操作', minWidth: '120', slotname: 'handler' }
    ]
    const isShowcolumn = true
    const isSelection = true
    const title = '首页类容'
    return {
      searchFormConfig,
      userList,
      propList,
      isShowcolumn,
      isSelection,
      title
    }
  }
})
</script>

<style scoped>
.el-table {
  border-top: 20px solid #f5f5f5;
  margin-top: 20px;
}
</style>
